<template>
    <a-menu
        mode="inline"
        :open-keys="openKeys"
        style="width: 100%"
        @openChange="onOpenChange"
        :default-selected-keys="defaultSelectedKeys"
        :inline-collapsed="collapsed"
    >
        <template v-for="(v, k) in menu">
            <a-sub-menu :key="k" v-if="v.children">
                <span slot="title">
                    <a-icon v-if="v.icon" :type="v.icon" />
                    <span>{{ v.title }}</span>
                </span>
                <a-menu-item v-for="(vv, kk) in v.children" :key="`${k}_${kk}`" @click="jump({path: vv.path, title: vv.title, subtitle: [v.title]})">
                    <a-icon v-if="vv.icon" :type="vv.icon" />
                    <span>{{ vv.title }}</span>
                </a-menu-item>
            </a-sub-menu>

            <a-menu-item v-else :key="`${k}`" @click="jump({path: v.path, title: v.title})">
                <a-icon v-if="v.icon" :type="v.icon" />
                <span>{{ v.title }}</span>
            </a-menu-item>
        </template>
    </a-menu>
</template>
<script>
import menu from './menu.js'
export default {
    name: 'Menu',
    data() {
        return {
            menu: menu,
            rootSubmenuKeys: [],
            openKeys: [0, 1, 2],
            defaultSelectedKeys: [],
            collapsed: false
        }
    },
    created() {
        this.initByHash()
        this.watchClientWidth()
    },
    methods: {
        watchClientWidth() {
            // const onWindowResize = () => {
            //     if (document.body.clientWidth < 1669) {
            //         this.collapsed = true
            //         this.openKeys = []
            //     } else {
            //         this.collapsed = false
            //     }
            // }
            // window.addEventListener("resize", onWindowResize);
            // onWindowResize()
        },
        initByHash() {
            /**
             * 初始化菜单栏和标题栏
             */
            this.openKeys = Object.keys(new Array(menu.length).fill(1)).map(v => v - 0)

            let hash = window.location.hash.replace('#', '')
            if (hash.indexOf('?') !== -1) {
                hash = hash.substr(0, hash.indexOf('?'))
            }

            const currentRoute = menu.reduce((total, v, k) => {
                if (v.children) {
                    total.push(...v.children.map((vv, kk) => {
                        vv.k = `${k}_${kk}`
                        vv.subtitle = [v.title]
                        return vv
                    }))
                } else {
                    v.k = `${k}`
                    v.subtitle = []
                    total.push(v)
                }
                return total
            }, []).find(v => v.path == hash)
            const defaultSelectedKeys = currentRoute.k
            this.defaultSelectedKeys = defaultSelectedKeys ? [defaultSelectedKeys] : ['0']

            setTimeout(() => {
                this.$changeTitle(currentRoute.title)
                this.$changeSubTitle(currentRoute.subtitle)
            }, 200);

        },
        onOpenChange(openKeys) {
            const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                this.openKeys = openKeys;
            } else {
                this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
        },
        jump(v) {
            this.$changeTitle(v.title)
            this.$changeSubTitle(v.subtitle)
            this.$router.push(v.path)
        }
    }
}
</script>

